<script setup lang="js">
	import api from '../../http/axios'

	let tb_data = ref(null)
	let currentData = ref(null)
	api.get('/Department')
		.then((res) => {
			tb_data.value = res
		})
		.catch((e) => {
			console.error(e)
		})

	const tb_setCurrentRowClass = (row) => {
		if (currentData.value && row.row.id == currentData.value.id) {
			console.log(row.row.id)
			return 'current_row'
		}
	}
	const handleCurrentChange = (row) => {
		currentData.value = row
	}
</script>
<template>
	<div>
		<div class="main">
			<el-card class="body_card">
				<el-table
					:data="tb_data"
					height="100%"
					row-key="id"
					table-layout="auto"
					class="data_table"
					@row-class-name="tb_setCurrentRowClass"
					@current-change="handleCurrentChange"
					empty-text="暂无数据"
					highlight-current-row>
					<el-table-column type="index" width="80" align="center" fixed label="序号" />
					<el-table-column prop="name" label="系部名称" align="left" show-overflow-tooltip fixed width="100" />
					<el-table-column prop="code" label="系部编码" align="center" show-overflow-tooltip width="100" />
					<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
					<el-table-column label="操作" width="200" align="center" fixed="right">
						<template #default="scope">
							<el-button size="small" @click="onUpdate(scope.$index, scope.row)"> 编辑 </el-button>
							<el-button size="small" type="danger" @click="onDelete(scope.$index, scope.row)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
	</div>
</template>
<style scoped lang="css">
	.main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: start;
		align-items: center;
		align-content: stretch;
	}
	.body_card {
		width: 100%;
		height: 100%;
	}
	.span_gender_woman {
		color: pink;
	}
	.span_gender_man {
		color: blue;
	}
	.data_table {
		width: 100%;
		height: 100%;
	}

	.current_row {
		color: red !important;
	}
</style>
